<!-- 预告片详情 -->
<!-- 预告片详情 -->
<template>
	<view class="page">
		<video class="details-video" id="myvideo" :src="details.trailer" :poster="details.poster"></video>
		<!-- 影片介绍 -->
		<view class="details-movie">
			<view class="details-movie-img" @click="preview" :data-cover="details.cover">
				<image class="movie-img" :src="details.cover"></image>
			</view>
			<view class="details-movie-introduce">
				<view class="details-movie-title">{{details.name}}</view>
				<view class="details-movie-info">{{details.basicInfo}}</view>
				<view class="details-movie-info">{{details.originaName}}</view>
				<view class="details-movie-info">{{details.totalTime}}</view>
				<view class="details-movie-info">{{details.releaseDate}}</view>
				<view class="details-movie-score">
					<view class="details-movie-score-left">
						<view class="movie-score-words">综合评分：</view>
						<view class="movie-score">{{details.score}}</view>
					</view>
					<view class="details-movie-score-right">
						<block v-if="details.score>=0">
							<star :score="details.score" :showscore="showscore"></star>
						</block>
						<view class="movie-score-prise">{{details.prisedCounts}}人点赞</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 剧情介绍 -->
		<view class="plot">
			<view class="line-wapper">
				<view class="line"></view>
			</view>
			<view class="plot-wapper">
				<view class="plot-title">剧情介绍</view>
				<view class="plot-words">{{details.plotDesc}}</view>
			</view>
		</view>
		<!-- 演职人员 -->
		<view class="actor">
			<view class="plot-title">演职人员</view>
			<scroll-view scroll-x="true" class="actor-wapper">
				<view class="actor-container">
					<view class="actor-item" v-for="(actor,index) in actors" :key="actor.staffId" :data-index="index" data-name="actors"
					 @click="Lookme">
						<image class="actor-item-img" :src="actor.photo"></image>
						<view class="actor-item-name">{{actor.name}}</view>
						<view class="actor-item-role">{{actor.actName}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 剧照 -->
		<view class="still">
			<view class="plot-title">剧照</view>
			<scroll-view scroll-x="true" class="still-wapper">
				<view class="still-container">
					<view class="still-item" v-for="(pics,index) in plotPics" :key="pics" :data-index="index" @click="Lookme">
						<image class="still-item-img" :src="pics"></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import star from "../../components/star.vue"
	import {
		mapGetters
	} from "vuex"
	export default ({
		data() {
			return {
				showscore: 0,
				details: {},
				Sdetails: {},
				plotPics: [],
				actors: [],
				actorsPhotos: []
			}
		},
		components: {
			star
		},
		computed: {
			...mapGetters(["movies"])
		},
		// 监听导航栏原生事件的生命周期
		onNavigationBarButtonTap(e) {
			// 分享按钮
			if (e.type == "share") {
				uni.showToast({
					title: "正在开发中"
				})
			}
		},
		// 页面初始渲染完成时
		onReady() {
			// 获得视频上下文对象
			this.videoContext = uni.createVideoContext('myvideo');
		},
		onHide() {
			// 页面被隐藏的时候，视频暂停
			this.videoContext.pause();
		},
		onShow() {
			//页面显示的时候播放视频
			if (this.videoContext) {
				this.videoContext.play()
			}
		},
		onUnload() {
			uni.removeStorage({
				key: "details"
			})
		},
		onLoad(params) {
			var _this = this;
			this.getDetails(params.movieId);
			// 查询演职人员
			this.$store.dispatch("GetStaff", params.movieId).then(data => {
				this.actors = data.data;
				console.log(data)
				for (var i = 0; i < data.data.length; i++) {
					this.actorsPhotos.push(data.data[i].photo)
				}
			})
			uni.getStorage({
				key: "details",
				success: function(res) {
					_this.Sdetails = res.data;
				}
			})
		},
		methods: {
			// 预览图片
			Lookme(e) {
				var urls = [];
				var index = e.currentTarget.dataset.index;
				var name = e.currentTarget.dataset.name;
				if (name == "actors") {
					urls = this.actorsPhotos;
				} else {
					urls = this.plotPics;
				}
				uni.previewImage({
					urls: urls,
					current: index,
					loop: true,
				});
			},
			preview(e) {
				var cover = e.currentTarget.dataset.cover;
				uni.navigateTo({
					url: '../preview/preview?cover=' + cover
				})
			},
			getDetails(movieId) {
				this.$store.dispatch("GetSearchTrailer", movieId).then(data => {
					var datas = data.data;
					if (datas == undefined || datas == null) {
						datas = this.Sdetails;
					} else {
						uni.setStorage({
							key: "details",
							data: datas
						})
					}
					this.plotPics = JSON.parse(datas.plotPics);
					this.details = datas;
				})
			}
		}
	})
</script>

<style>
	.details-video {
		width: 100%;
		height: 400upx;
	}

	/* 影片介绍 */
	.details-movie {
		display: flex;
		padding: 40upx 20upx;
		flex-direction: row;
		justify-content: space-between;
	}

	.details-movie-img {
		width: 280upx;
		height: 360upx;
	}

	.movie-img {
		width: 100%;
		height: 100%;
	}

	.details-movie-introduce {
		width: 400upx;
		display: flex;
		margin-left: 30upx;
		flex-direction: column;
	}

	.details-movie-title {
		font-size: 30px;
	}

	.details-movie-info {
		color: #a9a9a9;
		font-size: 13px;
		line-height: 18px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.details-movie-score {
		width: 360upx;
		height: 100upx;
		background: white;
		margin-top: 20upx;
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		box-shadow: 3px 2px 10px #dedede;
	}

	.details-movie-score-left {}

	.movie-score-words {
		font-size: 12px;
		color: grey;
	}

	.movie-score {
		font-size: 26px;
		font-weight: 700;
		margin-left: 8upx;
		color: #feab2a;
		line-height: 80upx;
	}

	.details-movie-score-right {
		margin-top: 30upx;
		margin-left: 30upx;
	}

	.movie-score-prise {
		font-size: 12px;
		color: grey;
		line-height: 22px;
	}

	/* 剧情介绍 */
	.line-wapper {
		padding: 0 20upx;
	}

	.line {
		height: 2upx;
		background: #dbdbda;
	}

	.plot {
		display: flex;
		flex-direction: column;
	}

	.plot-wapper {
		padding: 20upx 40upx;
	}

	.plot-title {
		color: #a9a9a9;
		font-size: 14px;
	}

	.plot-words {
		margin-top: 10upx;
		font-size: 16px;
	}

	/* 演职人员 */
	.actor {
		padding: 20upx 40upx;
	}

	.actor-wapper {
		margin-top: 20upx;
		overflow: auto hidden;
	}

	.actor-container {
		display: flex;
		flex-direction: row;
	}

	.actor-item {
		width: 170upx;
		margin-right: 20upx;
	}

	.actor-item-img {
		width: 170upx;
		height: 240upx;
	}

	.actor-item-name {
		width: 170upx;
		text-align: center;
		font-size: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.actor-item-role {
		color: #a9a9a9;
		width: 170upx;
		text-align: center;
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 剧照 */
	.still {
		padding: 20upx 40upx;
	}

	.still-wapper {
		margin-top: 20upx;
		overflow: auto hidden;
	}

	.still-container {
		display: flex;
		flex-direction: row;
	}

	.still-item {
		width: 220upx;
		margin-right: 20upx;
	}

	.still-item-img {
		width: 220upx;
		height: 320upx;
	}
</style>
